<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-07-09 16:18:58
 * @LastEditTime: 2024-07-11 18:06:42
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 拖拽设计区域
 * @FilePath: \chu-meng\client\src\pages\Design\components\DesignArea\DragDesignArea\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="dragDesignArea"
    @drop="listenDrop($event)"
    @dragover.prevent
  >
    <div class="dragDesignArea__container">
      <template v-for="(item, index) in $store.getters['componentList']" :key="index">
        <DragWrapper @click="onSelectedDragWrapper(item)" :class="{selected: item.id === $store.getters['currentSelectedComponentInfo'].id}">
          <component :is="item.type" :config="item.config">
          </component>
        </DragWrapper>
      </template>
    </div>
  </div>
</template>

<script setup>
// import {
//   FileOutlined,
//   CloseOutlined
// } from '@ant-design/icons-vue'
import { fetchViewComponent, fetchConfigComponent } from '@/packages/components/index.js'
import { componentInstall } from '@/utils/index.js'
import { onMounted, ref, reactive } from 'vue'
import { useStore } from 'vuex'

import DragWrapper from './DragWrapper/index.vue'

const store = useStore()

// 初始化
onMounted(() => {
})

// 监听设计区域的拖拽事件
const listenDrop = (e) => {
  store.dispatch('AddComponent')
  console.log(`🚀 ~ listenDrop ++++++ ~ e:`, e)
  const item = store.getters['currentDragComponent']
  console.log(item)
  componentInstall(item.type, fetchViewComponent(item))
  componentInstall(item.configType, fetchConfigComponent(item))
}

// 选中某一个区块
const onSelectedDragWrapper = (item) => {
  store.dispatch('SetCurrentSelectedComponent', item)
}

</script>

<style lang="scss" scoped>
.dragDesignArea{
  width: 100%;
  // height: calc(100vh - 177px);
  height: calc(100vh - 136px);
  overflow: hidden;
  // background-color: #031e2c;
  &__container{
    position: relative;
    padding: 10px;
  }
}
</style>
